<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="asset/reset.css">
		<link rel="stylesheet" href="asset/index.css"/>
		<link rel="stylesheet" href="asset/tabselector.css">
		<link rel="stylesheet" href="asset/timeline.css">
	</head>
	<body>
		<main id="mainBox">
			<!-- 选项卡选择框 -->
			<div class="leftTab fl">
				<div class="photo-wrap"><a href="javascript:void(0)" id="userPhoto"></a></div>
				<ul id="lt-tablist">
					<li class="active"><span id="info">个人简介</a></li>
					<li><span id="skill">技术方向</a></li>
					<li><span id="exper">学习经历</a></li>
				</ul>
			</div>
			<!-- 选项卡内容区域 -->
			<div class="rightTab fr">
				<!-- 信息栏 -->
				<section class="info show">
					<h3 class="tab-title">Personal Info</h3>
					<div class="info-wrap">
						<div class="magBox">
							<p class="mbox-uppertit">full name</p>
							<div class="mbox-message"><span id="userName">李龙</span></div>
						</div>
						<div class="magBox">
							<p class="mbox-uppertit">birthday</p>
							<div class="mbox-message"><span>november 15 1999</span></div>
						</div>
						<div class="magBox">
							<p class="mbox-uppertit">gender</p>
							<div class="mbox-message"><span>male</span></div>
						</div>
						<div class="magBox">
							<p class="mbox-uppertit">skill tag</p>
							<div class="mbox-message" id="skill-tag">
								<span>html5,css3</span>
								<span>ajax</span>
								<span>node</span>
								<span>php</span>
								<span>mysql</span>
								<span>mogodb</span>
								<span>Data Structures and Algorithms</span>
								<span>c</span>
								<span>linux</span>
							</div>
						</div>
					</div>
				</section>
				<!-- 能力技术栏 -->
				<section class="skill">
						<h3 class="tab-title show">Skill</h3>
						<p>前端方向</p>
						<div class="tab-selector">
							<input type="button" value="html" class="on">
							<input type="button" value="css">
							<input type="button" value="javascript">
							<input type="button" value="jquery">
							<input type="button" value="bootstrap">
							<input type="button" value="sass">
							<input type="button" value="vue">
							<div class="noticeTab">
								<div class="content" style='display: block;'>
									<div class="lang lang-html"></div>
								</div>
								<div class="content">
									<div class="lang lang-css"></div>
								</div>
								<div class="content">
									<div class="lang lang-javascript"></div>
								</div>
								<div class="content">
									<div class="lang lang-jquery"></div>
								</div>
								<div class="content">
									<div class="lang lang-bootstrap"></div>
								</div>
								<div class="content">
									<div class="lang lang-sass"></div>
								</div>
								<div class="content">
									<div class="lang lang-vue"></div>
								</div>
							</div>
						</div>
						<p>后端方向</p>
						<div class="tab-selector">
							<input type="button" value="linux" class="on">
							<input type="button" value="git">
							<input type="button" value="mysql">
							<input type="button" value="nodejs">
							<input type="button" value="php">
							<input type="button" value="nginx">
							<input type="button" value="mongodb">
							<div class="noticeTab">
								<div class="content" style='display: block;'>
									<div class="lang lang-linux"></div>
								</div>
								<div class="content">
									<div class="lang lang-git"></div>
								</div>
								<div class="content">
									<div class="lang lang-mysql"></div>
								</div>
								<div class="content">
									<div class="lang lang-nodejs"></div>
								</div>
								<div class="content">
									<div class="lang lang-php"></div>
								</div>
								<div class="content">
									<div class="lang lang-nginx"></div>
								</div>
								<div class="content">
									<div class="lang lang-mongodb"></div>
								</div>
							</div>
						</div>
				</section>
				<!-- 学习经历 -->
				<section class="exper">
						<h3 class="tab-title">Experience</h3>
						<ul class="timeline">
							<li class="event" data-date="2018 7">
							  <h3>学习了html,css静态页面</h3>
							  <p>了解到了一开始的网络原来是有一个一个这样的页面组合而成</p>
							</li>
							<li class="event" data-date="2018 8">
							  <h3>学习了javascript相关知识</h3>
							  <p>发现了许多的特效效果,和js语言的理念</p>    
							</li>
							<li class="event" data-date="2018 9">
							  <h3>深入学习js</h3>
							  <p>发现自己对js还是理解不深,于是又重新学习了一遍</p>
							  <p>知到互联网并不只是一个普普通通的页面,而是由一个一个服务器组成,通过对服务器的操作呈现在浏览器上</p>
							</li>
							<li class="event" data-date="2018 10">
							  <h3>接触后端语言和数据库</h3>
							  <p>尝试服务器调取</p> 
							</li>
						  </ul>
				</section>
			</div>
		</main>
		<script  src="js/index.js"></script>
		<script  src="js/tabselector.js"></script>
	</body>
</html>